<script>
import { imgUrl } from '../js/bg.js';
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 16,
            message: "字符长度在3~16",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 5,
            message: "字符长度不小于5",
            trigger: "blur",
          },
        ],
      },
      index:0,
      imgUrl:imgUrl
      // imgUrl: [
      //   require("../assets/bg.gif"),
      //   'http://p1.qhimg.com/bdm/0_0_100/t01a7e20297ee92fdd5.jpg',
      //   // 'https://p18.qhimg.com/bdm/0_0_100/t0178d3bd702613fd1f.jpg',
      //   'https://www.freeimg.cn/i/2023/11/23/655f74bd3045f.jpg',
      //   'https://www.freeimg.cn/i/2023/12/26/658a329a3e754.jpg',
      //   'https://www.freeimg.cn/i/2023/12/26/658a418a5ed51.jpg',
      //   'http://p1.qhimg.com/bdm/0_0_100/t01956fe610bef5e7dd.jpg',
      //   'http://p8.qhimg.com/bdm/0_0_100/t01480886781386f6fe.jpg',
      //   'http://p0.qhimg.com/bdm/0_0_100/t01582af447d0aa4805.jpg',
      //   'http://p8.qhimg.com/bdm/0_0_100/t01fd04f17c010cb6f4.jpg',
      //   'https://www.freeimg.cn/i/2023/12/26/658a37ae6f171.jpg',
      //   'http://p9.qhimg.com/bdm/0_0_100/t0163fa31dd6351bf12.jpg'
      // ]
    }
  },
  methods: {
    login() {
      // function(valid){.....} --> (valid)=>{....}
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.$http({
            method: "post",
            url: "http://43.143.190.87:8182/login",
            params: {
              username: this.form.username,
              pwd: this.form.password,
            },
          })
            .then((res) => {
              if (res.data.code == 1) {
                this.$message({
                  showClose: true,
                  message: res.data.msg,
                  type: "success",
                });
                console.log(res.data);
                this.$router.push("/main");
              } else {
                this.$message({
                  showClose: true,
                  message: "登录失败！",
                  type: "error",
                });
              }
            })
            .catch((e) => {
              this.$message({
                showClose: true,
                message: e,
                type: "error",
              });
              console.log(e);
            });
        } else {
          this.$message({
            showClose: true,
            message: "请输入正确的账号和密码！",
            type: "error",
          });
          return false;
        }
      });
    },
    resetForm() {
      this.$refs[loginForm].resetFields();
    },
    logout() {
      // sessionStorage.removeItem("userInfo");
      // this.$router.push("/login");
      this.$refs["form"].resetFields();
    },
    //切换背景图片
    changeImg() {
      this.index = (this.index+1)%this.imgUrl.length
    }
  },
  mounted() {},
};
</script>

<template>
  <div class="container" :style="{ backgroundImage: `url(${imgUrl[index]})` }">
    <el-button @click="changeImg">切换背景</el-button>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="80px"
      hide-required-asterisk
    >
      <h3>胖虎到家-后台登录</h3>
      <br />
      <el-form-item  prop="username" >
        <span>账号 </span>
        <el-input
          v-model="form.username"
          placeholder="请输入账户"
          prefix-icon="el-icon-user"
          style="width: 380px;"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password" >
        <span>密码 </span>
        <el-input
          type="password"
          v-model="form.password"
          placeholder="请输入密码"
          prefix-icon="el-icon-lock"
          style="width: 380px;"
        ></el-input>
      </el-form-item>
      <el-form-item class="btn">
        <el-button type="primary" plain @click="login('form')">登录</el-button>
        <el-button type="primary" plai @click="logout">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<style scoped>
.container {
  font-family: weiruan;
  height: 100vh;
  /* background: url("../assets/bg.gif") no-repeat center; */
  background: no-repeat center;
  background-size: 100% auto;
  overflow: hidden;
}

.el-form {
  width: 500px;
  margin: 0 auto;
  margin-top: 150px;
  padding: 20px 40px;
  border-radius: 10px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.308);
}
.container .el-form .btn {
  text-align: left;
}
</style>